<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Product.Master" Inherits="QianJin.Views.ProductList" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <table width="720" border="0" cellspacing="0" cellpadding="0">
        <%for (int i = 0; i < (Model.Products.Length - 1) / 4 + 1; i++)
          {%>
        <tr>
            <%for (int j = 0; j < 4; j++)
              { %>
            <%if ((i * 4 + j) < Model.Products.Length)
              { %>
            <%var prod = Model.Products[i * 4 + j];%>
            <td width="180" height="200" align="center" valign="middle" class="productIntro">
                <table width="140" border="0" cellspacing="0" cellpadding="0" class="border_all">
                    <tr>
                        <td height="105" align="center">
                            <a href="<%=this.Url.Action("ShowProduct", "ProductList", new {prodId = prod.id, categoryId = this.Model.CurrentCategory.id}) %>"><img style="border:none;" class="<%= prod.HasBriefIntroduction ? "ProductIntro" : ""%>" rel="<%=QianJin.Views.ViewUtility.GetProductIntroUrl(prod.id)%>"
                                src="<%=QianJin.Views.ViewUtility.GetProductImageUrl(prod.id) %>" width="140"
                                height="105" /></a>
                        </td>
                    </tr>
                </table>
                <table width="142" border="0" cellspacing="0" cellpadding="0" class="border_title">
                    <tr>
                        <td height="27" align="center">
                            <a href="<%=this.Url.Action("ShowProduct", "ProductList", new {prodId = prod.id, categoryId = this.Model.CurrentCategory.id}) %>">
                                <%=prod.Name %></a>
                        </td>
                    </tr>
                </table>
                <table width="142" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="20" align="center" bgcolor="#e5e5e5">
                            <%=prod.Price %>
                        </td>
                    </tr>
                </table>
                <table width="142" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td height="30" align="left">
                            <img src="/content/product_ico_1.jpg" width="16" height="16" align="absmiddle" />
                            <a href="<%=this.Url.Action("ShowProduct", "ProductList", new {prodId = prod.id, categoryId = this.Model.CurrentCategory.id}) %>">
                                <%=GetString("pl_detail") %></a>
                        </td>
                        <td align="right">
                            <img src="/content/product_ico_2.jpg" width="16" height="16" align="absmiddle" />
                            <%if (Model.User.ShoppingCart.IsProductAdded(prod.id))
                              { %>
                            <a href="<%=GetRemoveFromShoppingCartUrl(prod.id) %>" class=""><%=GetString("pl_unadd") %></a>
                            <%}
                              else
                              { %>
                            <a href="<%=GetAddToShoppingCartUrl(prod.id) %>" class=""><%=GetString("pl_add") %></a>
                            <%} %>
                        </td>
                    </tr>
                </table>
            </td>
            <%}
              else
              { %>
            <td width="180" align="center" valign="middle">
            </td>
            <%} %>
            <%} %>
        </tr>
        <%} %>
    </table>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">

    <script type="text/javascript" language="javascript" src="/Scripts/jquery.cluetip.js"></script>

    <link type="text/css" rel="Stylesheet" href="/Content/jquery.cluetip.css" />

    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $('img.ProductIntro').cluetip({
                cluetipClass: 'jtip',
                showTitle: false,
                mouseOutClose: true,
                sticky: true,
                mouseOutClose: true,
                arrows: true,
                closeText: '',
                delayedClose: 10000
            });
        });
    </script>

</asp:Content>
